<section class="ev-sm-container ev-view ">
    <div class="row">
        <div class="col s12 m6">
            <div class=" ev-card-panel ev-z-depth-5">
                <div class="ev-md-container ev-panel-title"><strong>My Existing Participant Teams</strong></div>
                <div class="loader-container card-loader-container" id="loader" ng-show="teams.isExistLoader" class="fade">
                    <!-- <div class="text-dark-gray center w-300 loader-title">{{teams.loaderTitle}}</div> -->
                    <div class="loader">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="ev-md-container ev-card-body exist-team-card">
                    <div ng-if="!showPagination" class="page-msg">{{teams.paginationMsg}}</div>
                    <ul class="collapsible" data-collapsible="accordion">
                        <li ng-repeat="(key, value) in teams.existTeam.results">
                            <div class="collapsible-header"><i class="fa fa-lg fa-users" aria-hidden="true"></i>
                                <div class="show-member-title pointer">
                                    <span ng-if="value.team_url != ''"><b class="text-med-black">Team: </b><a class="orange-text" href="{{value.team_url}}" target="_blank">{{value.team_name}}</a></span>
                                    <span ng-if="value.team_url == ''"><b class="text-med-black">Team: </b>{{value.team_name}}</span>
                                    <a ng-click="teams.confirmDelete($event, value.id)"><i class="fa fa-trash list-icon text-highlight w-300 right grey-text"></i></a>
                                    <a ng-click="teams.showMdDialog($event, value.id)"><i class="fa fa fa-pencil list-icon text-highlight w-300 right grey-text"></i></a>
                                    <a ng-click="teams.inviteOthers($event, value.id)"><i class="fa fa-user-plus list-icon text-highlight w-300 right"></i></a>
                                    <br>
                                    <span><b class="text-med-black">Created by: </b>{{value.created_by}}</span>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="collapsible-body">
                                <h6><b>Team Members:</b></h6>
                                <p ng-repeat="member in value.members">{{member.member_name}}</p>
                            </div>
                        </li>
                    </ul>
                    <section class="pagination" ng-if="teams.showPagination">
                        <div class="row rm-gut">
                            <div class="col s12 m6 ">
                                <a ng-class="teams.isPrev" class="btn-floating btn-pagination waves-effect waves-light " ng-click="teams.load(teams.existTeam.previous)">
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                                <span class="pagination-title"> <strong class="text-med-black"> Page {{teams.currentPage | ceil}} of {{teams.existTeam.count/10 | ceil}} </strong></span>
                                <a ng-class="teams.isNext" class="btn-floating btn-pagination waves-effect waves-light " ng-click="teams.load(teams.existTeam.next)">
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col s12 m6">
            <div class=" ev-card-panel ev-z-depth-5">
                <div class="ev-md-container ev-panel-title"><strong>Create a New Participant Team</strong></div>
                <div class="loader-container card-loader-container" id="loader" ng-show="teams.isLoader" class="fade">
                    <div class="loader">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="ev-md-container ev-card-body new-team-card">
                    <form ng-submit="teams.createNewTeam()">
                        <div class="input-field align-left">
                            <input id="name" type="text" class="validate text-dark-black dark-autofill w-400" ng-model="teams.team.name" ng-pattern="/^[\w -.]*$/" focus-if>
                            <span class="form-icon form-icon-dark"><i class="fa fa-user"></i></span>
                            <label for="name" data-error="wrong" data-success="right">Team Name*</label>
                            <div class="wrn-msg text-highlight" ng-show="teams.team.error">{{teams.team.error || 'Invalid naming'}}</div>
                        </div>
                        <div class="input-field align-left">
                            <input id="url" type="text" class="validate text-dark-black dark-autofill w-400" ng-model="teams.team.url" focus-if>
                            <span class="form-icon form-icon-dark"><i class="fa fa-link"></i></span>
                            <label for="url" data-error="wrong" data-success="right">Team URL (Optional)</label>
                        </div>
                        <div class="align-left reg-control">
                            <button class="waves-effect waves-dark btn grad-btn ev-btn-dark w-300 fs-14" type="submit" value="Submit">Create Participant Team</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Dialog Box Code -->
<div style="visibility: hidden">
    <div class="md-dialog-container" id="myDialog">
        <md-dialog layout-padding>
            <h2></h2>
            <p></p>
        </md-dialog>
    </div>
</div>

<!-- simple loader -->
<div class="loader-container" id="sim-loader">
    <div class="text-white center w-300 loader-title">Loading</div>
    <div class="loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
